<template>
  <div class="config-wrapper" v-loading="loading" element-loading-text="Loading"
       element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
    <common-search @searchBtn="searchBtn"></common-search>
    <commonTable :tableData="tableData" @edit="edit" @down="downLoad" @submit="submit"></commonTable>
    <edit v-if="editDialogVisible" @close="close" :form="currentRow" @submit="submit" />
    <div class="pagination-con">
      <el-pagination @current-change="handleCurrentChange" @size-change="handleChange"
                     :current-page="tableParams.pageNum"
                     :page-size="tableParams.pageSize" :page-sizes="[10, 20, 50]"
                     layout="total, sizes, prev, pager, next"
                     :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import commonSearch from "./components/commonSearch.vue";
import commonTable from "./components/commonTable.vue";
import edit from "./components/edit.vue";
import { downRow, editData, getDataList } from "@/api";
import { downloadFile } from "@/utils/utils";
import { format, addDays } from "date-fns";

export default {
  name: "configManage",
  components: {
    commonSearch,
    commonTable,
    edit
  },
  data() {
    return {
      tableParams: {
        "pageNum": 1,
        "pageSize": 10,
        "query": ""
      },
      tableData: [],
      editDialogVisible: false,
      currentRow: {},
      total: 0,
      loading: false,
      collapseData: [
        {
          id: "1",
          name: "Orbit prediction 1",
          nodeType: "Optical",
          newForm: {
            geometry: "",
            groupVal: "Resolution",
            groupType: "Resolution",
            scenetime: [format(new Date(), "yyyy-MM-dd hh:mm:ss"),format(addDays(new Date(), 2), "yyyy-MM-dd hh:mm:ss")],
            province: "",
            uploadFiles: null,
            satellite: [],
            checkDataList: [],
            sateCheckList: []
          }
        }
      ]
    };
  },
  watch: {
    $route: {
      handler(val) {
        if (val) {
          if (val.path) {
            localStorage.setItem("collapseData", JSON.stringify(this.collapseData));
          }
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      const res = await getDataList(this.tableParams);
      this.tableData = res.rows;
      this.total = res.total;
      Object.assign(this.tableParams, {
        pageNum: res.pageNum,
        pageSize: res.pageSize
      });
    },
    handleCurrentChange(val) {
      this.tableParams.pageNum = val;
      this.getData();
    },
    handleChange(val) {
      this.tableParams.pageSize = val;
      this.getData();
    },
    searchBtn(val) {
      Object.assign(this.tableParams, {
        query: val,
        "pageNum": 1,
        "pageSize": 10
      });
      this.getData();
    },
    close() {
      this.editDialogVisible = false;
    },
    async submit(form) {
      const res = await editData(form);
      if (res.code === 200) {
        this.$message.success("edit success !");
        this.getData();
        this.editDialogVisible = false;
      }
    },
    edit(row) {
      this.currentRow = JSON.parse(JSON.stringify(row));
      this.$nextTick(() => {
        this.editDialogVisible = true;
      });
    },
    async downLoad(row) {
      const { id, satelliteCode } = row;
      let res = await downRow({ id });
      downloadFile(res, satelliteCode);
    }
  }
};
</script>

<style scoped lang="scss">
.config-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  background: #1F222A;
}

.pagination-con {
  width: 100%;
  position: fixed;
  bottom: 50px;
  right: 50px;
  text-align: right;

  ::v-deep .el-pagination__total,
  ::v-deep .el-pagination__jump {
    color: #fff;
  }

  ::v-deep .el-pager li {
    background: transparent;
    color: #fff;
  }

  ::v-deep .el-pager li.active {
    color: #1970F2;
  }

  ::v-deep .el-pagination .btn-next,
  ::v-deep .el-pagination .btn-next,
  ::v-deep .el-pagination .btn-prev {
    background: transparent;
    color: #fff;
  }
}
</style>
